<template>
  <view class="classify-page page-gradient-color">
    <custom-bar title="分类"></custom-bar>
    <view class="classify">
      <w-special-topic-item
        v-for="item in classifyList"
        :key="item._id"
        :item="item" />
    </view>

    <view class="loading" v-if="classifyList.length || endState">
      <uni-load-more :status="endState ? 'noMore' : 'loading'"></uni-load-more>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onReachBottom } from '@dcloudio/uni-app'
import { apiClassifyList } from '@/api'

const params = ref({
  pageNum: 1,
  pageSize: 15,
})
const classifyList = ref([])
const endState = ref(false)
const getClassifyList = async () => {
  uni.showLoading({
    title: '加载中...',
    mask: true,
  })

  const data = await apiClassifyList({ ...params.value })
  uni.hideLoading()
  if (!data.length) {
    endState.value = true
    uni.showToast({
      title: '没有更多了',
      icon: 'none',
    })
    return
  }
  classifyList.value = [...classifyList.value, ...data]
  console.log('%c Line:20 🍯 classifyList', 'color:#33a5ff', classifyList.value)
}
getClassifyList()

onReachBottom(() => {
  if (endState.value) return
  params.value.pageNum++
  getClassifyList()
})
</script>

<style lang="scss" scoped>
.classify-page {
  background-color: $uni-bg-color;
}
.classify {
  padding: 30rpx;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15rpx;
}

.end {
  font-size: $font-size-sm;
  color: $font-color-4;
  padding: 20rpx 0 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
